
<template>
  <div>
    <el-table :data="table.data" border style="width: 100%;margin-bottom:30px">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
    <div style="margin-bottom:15px;margin-left:15px">
       <el-upload :before-upload="handleUpload" action="default">
      <el-button type="primary">选择要导入的 .xlsx 表格</el-button>
    </el-upload>
    </div>
   
    <div style="margin-bottom:15px;margin-left:15px">
      <el-button @click="export2Excel" type="primary">
        <el-icon name="download" />导出为 Excel
      </el-button>
    </div>

    <Can />
  </div>
</template>
 
<script>
import Vue from "vue";
import pluginImport from "@d2-projects/vue-table-import";
import Can from "@/views/canvas";

Vue.use(pluginImport);
// Vue.use(pluginExport)

export default {
  data() {
    return {
      table: {
        columns: [],
        data: [
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
          },
          {
            date: "",
            name: "",
            address: "",
          },
        ],
      },
    };
  },
  mounted() {
    this.kong();
  },
  components: {
    Can,
  },
  methods: {
    handleUpload(file) {
      this.$import.xlsx(file).then(({ header, results }) => {
        // this.table.columns = header.map((e) => {
        //     console.log(e);
        //   return {
        //     label: e,
        //     prop: e,
        //   };
        // });
        // console.log(header);
        this.table.data = [];
        this.table.data = JSON.parse(JSON.stringify(results));
        this.table.data = this.table.data.map((item) => {
          return {
            date: item.日期,
            name: item.姓名,
            address: item.地址,
          };
        });
      });
      return false;
    },
    export2Excel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require("../../excel/Export2Excel");
        const tHeader = ["日期", "姓名", "地址"]; // 上面设置Excel的表格第一行的标题
        const filterVal = ["date", "name", "address"];
        const list = this.table.data;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "列表excel");
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    kong() {
      let b = 11;
      console.log(this.a ?? b); //空运算符
    },
  },
};
</script>
 
<style lang="scss" scoped>
  ::v-deep .el-table td, .el-table th{
    height: 48px;
  }

</style>
